<template>
  <div class="Collect">
    <van-nav-bar title="我的收藏" fixed left-arrow @click-left="onClickLeft" />
    <!-- 标题 -->
    <div class="clcon">
      <div class="collectItem">
        <div class="collectItem-header">
          <h4>我和你一样</h4>
          <p>陈仲凯兔兔</p>
        </div>
        <div class="collectImg">
          <img src="/collect/1.png" />
        </div>
      </div>
      <div class="collectItem">
        <div class="collectItem-header">
          <h4>考研备考过程中的18个建议</h4>
          <p>备考经验</p>
        </div>
        <div class="collectImg">
          <img src="/collect/2.png" />
        </div>
      </div>
      <div class="collectItem">
        <div class="collectItem-header">
          <h4>给考研女生的一封信</h4>
          <p>石麻麻专列</p>
        </div>
        <div class="collectImg">
          <img src="/collect/3.png" />
        </div>
      </div>

      <div class="collectItem">
        <div class="collectItem-header">
          <h4>考研必须要避开的坑</h4>
          <p>备考经验</p>
        </div>
        <div class="collectImg">
          <img src="/collect/4.png" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    //返回上一页
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="scss">
.Collect {
  height: 100vh;
  background-color: #fff;
  .clcon {
    margin: 46px 10px 0 10px;
    .collectItem {
      margin-bottom: 15px;
      background-color: rgba(241, 243, 239, 0.788);
      padding: 1px 0;
      border-radius: 10px;
    }
    .collectItem-header {
      text-align: left;
      margin-left: 20px;
    }
    .collectItem-header h4 {
      width: 200px;
    }
    .collectItem-header p {
      font-size: 10px;
      padding-top: 25px;
    }
    .collectItem {
      position: relative;
    }
    .collectImg {
      position: absolute;
      top: 20px;
      /* left: 35%; */
      margin-left: 110px;
      text-align: right;
    }
    .collectImg img {
      width: 40%;
    }
  }
}
</style>